<template>
  <div class="bottom-bar">
    <div class="check-content">
      <check-button
        class="check-button"
        :isChecked="isSelectAll"
        @click.native="allClick"
      />
      <span>全选</span>
    </div>
    <div class="sum">合计:￥{{ Msum }}</div>
    <div class="go">去计算({{ Csum }})</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import CheckButton from "../../../components/content/checkbutton/CheckButton.vue";
export default {
  components: { CheckButton },
  name: "Cartbottombar",

  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      list: "cartList",
      length: "Select",
    }),
    isSelectAll() {
      if (this.list.length === 0) {
        return false;
      }
      // 1.使用find
      return !this.list.find((item) => !item.checked);
      // 2.使用filter
      // return !(this.list.filter(item =>!item.checked).length)
      // 3.普通遍历
      // for(let item of this.list){
      //   if(!item.checked){
      //     return false
      //   }
      // }
      // return true
    },
    Csum() {
      return (this.list.filter((item) => item.checked).length);
    },
    Msum() {
      let sum = 0;
      for (let i in this.list) {
        if (this.list[i].checked) {
          sum +=
            parseFloat(this.list[i].price) * parseFloat(this.list[i].count);
        }
      }
      return sum.toFixed(2);
    },
  },
  mounted() {},

  methods: {
    allClick(){
      if(this.isSelectAll){//若是全部选中
        this.list.forEach(item => item.checked = false)
      }
      else{
        this.list.forEach(item => item.checked = true)
      }
    }
  },
};
</script>

<style lang="css" scoped>
.bottom-bar {
  height: 44px;
  background-color: pink;
  position: absolute;
  bottom: 44px;
  left: 0;
  right: 0;
  line-height: 44px;
  display: flex;
  font-size: 14px;
}
.bottom-bar > div {
  flex: 1;
  text-align: left;
}
.bottom-bar >div:last-child{
  text-align: center;
}
.check-content {
  display: flex;
  align-items: center;
}
.check-button {
  line-height: 20px;
  align-items: center;
}
/* span{
  font-size: 16px;
} */
.check-content span {
  flex: 1;
}
.go {
  background-color: red;
}
</style>